<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            padding: 100px;
        }
        
        .container {
            position: relative;
            width: 533px;
            height: 300px;
            margin: 0 auto;
        }
        
        ul {
            list-style: none;
        }
        
        .item {
            /* display: none; */
            position: absolute;
            opacity: 0;
            transition: opacity 1s;
        }
        
        .active {
            /* display: block; */
            opacity: 1;
        }
        /* 圆点 */
        
        .circles-con {
            position: absolute;
            right: 10px;
            bottom: 20px;
        }
        
        .circle {
            float: left;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin: 0px 5px 0px 5px;
            background-color: #fff;
        }
        
        .circle.on {
            background-color: orange;
        }
        /* 左右图标 */
        
        .next,
        .pre {
            width: 54px;
            height: 79px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .pre {
            display: none;
            background: url(./images/pre.png) no-repeat;
            left: 25px;
        }
        
        .next {
            display: none;
            background: url(./images/next.png) no-repeat;
            right: 25px;
        }
        
        .container:hover .next,
        .container:hover .pre {
            display: block;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item active"><img src="./images/心明眼亮.webp" alt=""></div>
        <div class="item"><img src="./images/疾风已有归途.webp" alt=""></div>
        <div class="item"><img src="./images/真正的大师永远怀着一颗学徒的心.webp" alt=""></div>
        <div class="item"><img src="./images/长枪依在.webp" alt=""></div>
        <ul class="circles-con">
            <li class="circle on"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
        </ul>
        <div class="next"></div>
        <div class="pre"></div>
    </div>

    <script>
        let items = document.querySelectorAll('.item')
        let circles = document.querySelectorAll('.circle')
        let index = 0
        let timerId = null
            //利用定时器实现自动播放
        function autoPlay() {
            timerId = setInterval(function() {
                items[index].classList.remove('active')
                circles[index].classList.remove('on')
                index++
                if (index === 4) {
                    index = 0
                }
                items[index].classList.add('active')
                circles[index].classList.add('on')
            }, 1000)
        }
        autoPlay()
            //鼠标移入时停止自动播放，移出继续
        function mouseswitch() {
            let containers = document.querySelector('.container')
            containers.addEventListener('mouseenter', function() {
                clearInterval(timerId)
                timerId = null
            })
            containers.addEventListener('mouseleave', function() {
                autoPlay()
            })
        }
        mouseswitch()

        //鼠标点击上和下图标显示相应的图片，并且圆点发生变化
        function preAndNext() {
            let next = document.querySelector('.next')
            let pre = document.querySelector('.pre')

            pre.addEventListener('click', function() {
                items[index].classList.remove('active')
                circles[index].classList.remove('on')
                index--
                if (index === -1) {
                    index = 3
                }
                items[index].classList.add('active')
                circles[index].classList.add('on')
            })
            next.addEventListener('click', function() {
                items[index].classList.remove('active')
                circles[index].classList.remove('on')
                index++
                if (index === 4) {
                    index = 0
                }
                items[index].classList.add('active')
                circles[index].classList.add('on')
            })
        }
        preAndNext()
            //点击圆点变换图片
        circles.forEach(function(circle, i) {
            circle.addEventListener('click', function() {
                circles[index].classList.remove('on')
                items[index].classList.remove('active')
                this.classList.add('on')
                items[i].classList.add('active')
                index = i
            })
        })
    </script>
</body>

</html>